<template>
  <div class="home-nav-bar">
    <nav-bar>
      <div slot="left" @click="handleSkipHome">ele.me</div>
      <div slot="right" @click="handleSkipLogin" class="right">
        <img src="~assets/img/home/profile.png" alt="" v-show="isShow" />
        <span v-show="!isShow" class="text">登录/注册</span>
      </div>
    </nav-bar>
  </div>
</template>

<script>
import { navbar } from "common/mixin";
export default {
  data() {
    return {
      isShow: false,
    };
  },
  mixins: [navbar],
  activated() {
    this.isShow = localStorage.getItem("user_id") ? true : false;
  },
  methods: {
    handleSkipLogin() {
      this.isShow ? this.$router.push("/profile") : this.$router.push("/login");
    },
    handleSkipHome() {
      // 点击刷新该页面
      location.reload();
    },
  },
};
</script>
<style lang="less" scoped>
.home-nav-bar {
  padding-right: 15px;
  background-color: var(--color-tint);
  color: #fff;
  .right {
    text-align: right;
    img {
      width: 50%;
    }
    .text {
      white-space: nowrap;
    }
  }
}
</style>